import React, { Component } from 'react';
import services from '../../api/interface'
import '../../style/Index/Mainlist.css'
import { withRouter } from 'react-router-dom';
import { InfiniteScroll, List,PullToRefresh } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
class Mainlist extends Component {
    state = {
        mainlist: [],hasMore:true,page:1,mainlist:[]
    }
    async componentDidMount() {
        var res = await services.pro.pro_list({ count: 1, limitNum: 10 })
        this.setState({
            mainlist: res.data.data
        })
        // console.log(res.data.data);
    }
    onClick(item) {
        this.props.history.push({ pathname: '/detail', state: { id: item.proid } })
    }
    loadMore = async () => {
        var res = await services.pro.pro_list({ count: this.state.page, limitNum: 10 })
        await sleep(2000)
        this.setState({
            mainlist: [...this.state.mainlist, ...res.data.data],
            page: this.state.page + 1,
            hasMore: res.data.data.length > 0
        })
    }
    render() {
        return (
            <div className='main' style={{marginBottom:'10px'}}>
                    
                    {
                        this.state.mainlist.map((item, index) => {
                            return (
                                <div className="mainboxl" key={index} onClick={() => { this.onClick(item) }}>
                                    <div className="img">
                                        <img src={item.img1} alt="" />
                                    </div>
                                    <div className="xia">
                                        <div className="categroy">{item.proname}</div>
                                        <div className="priodd">￥{item.originprice}</div>
                                    </div>

                                </div>
                            )

                        })
                    }
                    < InfiniteScroll loadMore={this.loadMore} hasMore={this.state.hasMore}/>

            </div>

        );
    }
}
export default withRouter(Mainlist);